<template>
    <div v-if="tkIsShow">
        <div class="zhezhao"></div>
        <div class="tankuang">
            <div class="tk_title">{{ title }}</div>
            <img src="../assets/icon-close.png" class="tk_close" @click="closeTk">
            <div class="tk_content">
                <div class="tk_form">
                    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                        <el-form-item label="名称" prop="spuName">
                            <el-input v-model="form.spuName" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="描述" prop="spuDesc">
                            <el-input v-model="form.spuDesc" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="一级分类" prop="sort1Id">
                            <el-select v-model="form.sort1Id" placeholder="请选择" size="small" @change="handleSelectChange" filterable>
                                <el-option 
                                    v-for="item in firstSorts"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="二级分类" prop="sort2Id">
                            <el-select v-model="form.sort2Id" placeholder="请选择" size="small" filterable>
                                <el-option 
                                    v-for="item in secondSorts"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="租户" prop="supplierId">
                            <el-select v-model="form.supplierId" placeholder="请选择" size="small" filterable>
                                <el-option
                                    v-for="item in supplierList"
                                    :key="item.supplierId"
                                    :label="item.supplierName"
                                    :value="item.supplierId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否上架" prop="publishStatus">
                            <el-radio-group v-model="form.publishStatus">
                                <el-radio :label="1">上架</el-radio>
                                <el-radio :label="0">下架</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否每日精选" prop="isNew">
                          <el-radio-group v-model="form.isJingxuan">
                              <el-radio :label="1">是</el-radio>
                              <el-radio :label="0">否</el-radio>
                          </el-radio-group>
                      </el-form-item>
                        <el-form-item label="是否最新推荐" prop="isNew">
                            <el-radio-group v-model="form.isNew">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否现时秒杀" prop="isNew">
                          <el-radio-group v-model="form.isMiaosha">
                              <el-radio :label="1">是</el-radio>
                              <el-radio :label="0">否</el-radio>
                          </el-radio-group>
                      </el-form-item>
                        <el-form-item label="是否热门推荐" prop="isPopular">
                            <el-radio-group v-model="form.isPopular">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否支持DIY" prop="isDiy">
                            <el-radio-group v-model="form.isDiy">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否双面编辑" prop="isTwo">
                          <el-radio-group v-model="form.isTwo">
                              <el-radio :label="2">是</el-radio>
                              <el-radio :label="1">否</el-radio>
                          </el-radio-group>
                       </el-form-item>
                      <el-form-item label="是否支持抠图" prop="isMatting">
                        <el-radio-group v-model="form.isMatting">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                        <el-form-item label="排序(数字大靠前)" prop="level">
                            <el-input type="number" v-model="form.level" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="起售数量" prop="minNum">
                            <el-input type="number" v-model="form.minNum" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="前端列表显示价格" prop="price">
                            <el-input type="number" v-model="form.price" size="small"></el-input>
                        </el-form-item>
                        
                        <el-form-item label="模板资源包" prop="sourceId">
                          <el-select v-model="form.sourceId" placeholder="请选择" size="small" filterable>
                            <el-option
                                v-for="item in temPackList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')" size="small">保存</el-button>
                            <el-button @click="resetForm('ruleForm')" size="small">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
        tkIsShow:false,
        title:"",
        form:{},
        rules: {
            spuName: [
                {required: true,message: "请输入产品名称",trigger: ["blur,change"]}
            ],
            spuDesc: [
                {required: true,message: "请输入产品描述",trigger: ["blur,change"]}
            ],
            sort1Id: [
                {required: true,message: "请选择一级分类",trigger: ["blur,change"]}
            ],
            sort2Id: [
                {required: true,message: "请选择二级分类",trigger: ["blur,change"]}
            ],
            supplierId: [
                {required: true,message: "请选择产品归属租户",trigger: ["blur,change"]}
            ],
            minNum: [
                {required: true,message: "请输入起购数量",trigger: ["blur,change"]}
            ],
            level: [
                {required: true,message: "请输入排序数值",trigger: ["blur,change"]}
            ],
            price: [
                {required: true,message: "请输入列表显示价格",trigger: ["blur,change"]}
            ],
            sourceId: [
                {required: true,message: "请选择编辑器资源包",trigger: ["blur,change"]}
            ]
        },
        firstSorts:[],
        secondSorts:[],
        supplierList:[],
        temPackList:[]
    };
  },
  methods: {
    __init(str, id) {
        this.getFirstSorts();
        this.getAllSuppliers();
        this.getTemplatePackages();
        if (str == "add") {
            this.secondSorts=[];
            this.form={
                spuId:0,
                spuName:'',
                spuDesc:'',
                sort1Id:'',
                sort2Id:'',
                supplierId:'',
                publishStatus:0,
                isNew:0,
                isPopular:0,
                isDiy:0,
                level:1,
                price:'',
                minNum:'',
                sourceId:0,
                isMiaosha:0,
                isJingxuan:0,
                isMatting:0,
                isTwo:2
            }
        }else{
            var url="manager/getGoodsById";
            var params={
                id: id
            }
            this.$post(url, params).then((res) => {
                console.log(res)
                if (res.code === 0) {
                    this.form={
                        spuId:res.data.spuId,
                        spuName:res.data.spuName,
                        spuDesc:res.data.spuDesc,
                        sort1Id:res.data.sort1Id,
                        sort2Id:res.data.sort2Id,
                        supplierId:res.data.supplierId,
                        publishStatus:res.data.publishStatus,
                        isNew:res.data.isNew,
                        isPopular:res.data.isPopular,
                        isDiy:res.data.isDiy,
                        level:res.data.level,
                        minNum:res.data.minNum,
                        price:res.data.price,
                        sourceId:res.data.sourceId,
                        isMiaosha:res.data.isMiaosha,
                        isJingxuan:res.data.isJingxuan,
                        isMatting:res.data.isMatting,
                        isTwo:res.data.isTwo
                    }
                    this.getSecondSorts(res.data.sort1Id);
                } else {
                    this.$message.error(res.msg)
                }
            });
        }
    },
    getFirstSorts(){
      var url="manager/getAllSorts";
      var params={
        parentId:0
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.firstSorts=res.data;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    handleSelectChange(id){
      this.getSecondSorts(id);
    },
    getSecondSorts(id){
      var url="manager/getAllSorts";
      var params={
        parentId:id
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.secondSorts=res.data;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    getAllSuppliers(){
      var url="manager/getAllSuppliers";
      var params={
        supplierName:''
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.supplierList=res.data;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    getTemplatePackages(){
      var url="manager/getTemplatePackages";
      var params={
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.temPackList=res.data;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var url="manager/addGoods";
            var params={
                ...this.form
            }
            this.$post(url, params).then((res) => {
                console.log(res)
                if (res.code === 0) {
                    this.$message.success(res.msg)
                    this.closeTk();
                } else {
                    this.$message.error(res.msg)
                }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
    },
    closeTk(){
        this.tkIsShow = false;
        this.$emit("close");
    }
  }
}
</script>
<style scoped lang="scss">
  .zhezhao{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.2;
    top: 0;
    left: 0;
    z-index: 200;
  }
  .tankuang{
    position: fixed;
    width: 36%;
    background-color: #fff;
    top: 5%;
    left: 32%;
    z-index: 201;
    height: 90%;
    border-radius: 5px;
  }
  .tk_title{
    font-size: 17px;
    height: 25px;
    line-height: 25px;
    margin: 15px 0;
  }
  .tk_content{
    width: 100%;
    height: calc(100% - 100px);
    overflow-y: auto;
    &::-webkit-scrollbar {
        width: 8px; /* 设置滚动条宽度为8像素 */
        background-color: transparent;
      }
      /* 滑块样式 */
      &::-webkit-scrollbar-thumb {
        background-color: #1e4dc6; /* 设置滑块颜色为深灰色 */
        border-radius: 4px; /* 设置滑块边角半径为4像素 */
      }
      /* 滚动条轨道内部空白区域样式 */
      &::-webkit-scrollbar-track {
        background-color: #fff /* 设置轨道背景色为浅灰色 */
      }
  
      /* 滚动条两端按钮样式 */
      &::-webkit-scrollbar-button {
        display: none; /* 不显示按钮 */
      }
  
      /* 交叉点处的区域样式 */
      &::-webkit-scrollbar-corner {
        background-color: transparent; /* 设置交叉点处的背景色为透明 */
      }
  
      /* 调整大小手柄样式 */
      &::-webkit-resizer {
        display: none; /* 不显示调整大小手柄 */
      }
  }
  .tk_form{
    width: 80%;
    margin-left: 10%;
    height: 100%;
  }
  .tk_close{
    position: absolute;
    width: 16px;
    height: 16px;
    top: 18px;
    right: 20px;
  }
  ::v-deep .el-select>.el-input{
    width: 310px !important;
  }
</style>